<template>
	<div>
		<div v-if="bettingType === 'combo'" class="p-1 flex justify-between items-center">
			<betting-combo :data="sportIds" class="flex-1 truncate" />
			<betting-odds-plus
				:displayOdds="data.displayOdds"
				:comboBonusOdds="comboBonusOdds"
				:outcome="data.outcome" />
		</div>
		<match-league
			v-else-if="bettingType === 'season'"
			class="p-1"
			:sport-id="selection?.sportId"
			:league-id="selection?.leagueId"
			:league-name="selection?.leagueName" />
		<match-info-live
			v-else-if="bettingType === 'live'"
			class="p-1"
			:event-id="selection?.eventId"
			:sport-id="selection?.sportId"
			:league-id="selection?.leagueId"
			:league-name="selection?.leagueName"
			:date="selection?.startEventDate"
			:liveGameState="matchData?.liveGameState || selection?.liveGameState"
			:channel="matchData?.channel || selection?.channel" />
		<match-info-upcoming
			v-else
			class="p-1"
			:sport-id="selection?.sportId"
			:league-id="selection?.leagueId"
			:league-name="selection?.leagueName"
			:date="selection?.startEventDate"
			:home-icon="selection?.homeTeamIcon"
			:home-team-name="selection?.homeTeamName"
			:home-score="selection?.homeScore"
			:away-icon="selection?.awayTeamIcon"
			:away-team-name="selection?.awayTeamName"
			:away-score="selection?.awayScore"
			:outcome="selection?.outcome" />
	</div>
</template>

<script lang="ts" setup>
import BettingCombo from '../betting-combo/index.vue'
import BettingOddsPlus from '../betting-odds-plus/index.vue'
import { MatchLeague, MatchInfoLive, MatchInfoUpcoming } from '../../match'
import { PropType, computed } from 'vue'
import { FeedType, BetType, Match } from '@/types'
import { MatchType } from '@/enums'

const props = defineProps({
	data: {
		type: Object as PropType<FeedType | BetType>,
		required: true
	},
	matchData: {
		type: Object as PropType<Match | null>
	},
	isLive: {
		type: Boolean,
		default: false
	},
	isCombo: {
		type: Boolean,
		default: false
	}
})

const bettingType = computed(() => {
	if (props.isCombo) {
		return 'combo'
	} else if (props.data.selections[0].eventType === MatchType.outright) {
		return 'season'
	} else if (props.isLive) {
		return 'live'
	} else {
		return 'single'
	}
})

const sportIds = computed(() => props.data.selections.map(({ sportId }) => sportId))

const comboBonusOdds = computed(() => {
	let res = 0
	if (props.data.comboBonusPercent) {
		res = +props.data.trueOdds * +props.data.comboBonusPercent
	}
	return res
})

const selection = computed(() => {
	if (props.data.selections.length) {
		return props.data.selections[0]
	} else {
		return null
	}
})
</script>
